<template>
  <div class="common-layout">
    <el-container class="container-style">
      <el-aside width="230px" class="left-menu-style">
          <StaffLeftMenu :username="username"/>
        </el-aside>
      <el-container style="width: 100%;height: 100%;">
        <el-header class="header-style">
          <h1>失物招领平台员工端</h1>
          <el-dropdown style="float: right;">
            <div class="area1">
              <el-avatar class="avater" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.5arugzq9ULCAql220BwWQgHaHa?w=167&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"/>
              <span style="margin-left: 5px;">{{ this.username }}</span>
              <el-icon style="color: #545c64;"><CaretBottom /></el-icon> 
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="this.$router.push('/staff/staffpersonalcenter')">个人中心</el-dropdown-item>
                <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main class="content-style">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

 
<script>
import StaffLeftMenu from "@/components/StaffLeftMenu.vue";
import { CaretBottom } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
export default {
  name:"BackgroundPage",
  data(){
    return {
        username:null,
    }
  },
  components: {
      StaffLeftMenu,
      CaretBottom
  },
  mounted(){
    const storedUsername = localStorage.getItem('username');
    if (storedUsername) {
      this.username = storedUsername;
    }
        localStorage.setItem('username', this.username);
  },
  methods: {
    handleLogout() {
      ElMessageBox({
        message: '确定要退出登录吗？' ,
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
      }).then(()=>{
      // 清除 localStorage 中的用户信息
      localStorage.removeItem('username');
      localStorage.removeItem('token');
      // 跳转到用户端首页
      this.$router.push('/');
      }).catch(()=>{
        
      })
    },
  },
} 
</script>
 
<style scoped>

.common-layout {
  height: 925px;
  width: 100%;
}
.container-style {
  height: 100%;
  width: 100%;
  background-color: rgb(202, 195, 195);
} 
.header-style {
  text-align: center;
  padding-top: 10px;
  /* background-color: bisque; */
  /* background: linear-gradient(to right,rgb(164, 220, 51),rgb(142, 30, 173)); */
  /* animation: backgroundAnimation 3s infinite; */
  background: #355c7d; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #46b793, #42a59c, #47a0c3); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(45deg, #545c64, #7d7d7d,#b7b7b7 ); 
}
.header-style h1 {
  display: inline-block;
  margin: 0 auto;
  font-size: 25px;
}
.left-menu-style {
  height: 100%;
  background-color: #2c3e50;
}
.content-style {
margin-top: 0px;
  height: 100%;
  background-color: aliceblue;
}
.area1 {
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
}
.el-tooltip__trigger:focus-visible{
    outline: unset;
}
@keyframes backgroundAnimation {
0% {
  background-color: #f40622;
}
50% {
  background-color: #19a3ed;
}
100% {
  background-color: #f5132e;
}
}
</style>
